<template>
  <view class="main">
    <view class="title">
      <i class="icon el-icon-s-data"></i>
      <text style="flex: 1">商品概览</text>
      <!-- <el-radio-group v-model="mode" size="small" fill="#409EFF" @change="init">
				<el-radio-button label="时">最近24小时</el-radio-button>
				<el-radio-button label="日">最近28日</el-radio-button>
				<el-radio-button label="月">最近12月</el-radio-button>
			</el-radio-group> -->

      <text style="font-size: 12px; color: rgba(0, 0, 0, 0.85)"
        >时间筛选：</text
      >
      <vk-data-input-date-time
        v-model="time"
        type="daterange"
        size="small"
        :clearable="false"
        :picker-options="pickerOptions"
      ></vk-data-input-date-time>

      <el-button
        style="margin-left: 10rpx"
        type="primary"
        size="small"
        @click="init"
        >查询</el-button
      >
    </view>
    <detail-good-view ref="detailGoodView" @comp="hidden"></detail-good-view>
    <detail-good-chart ref="detailGoodChart" @comp="hidden"></detail-good-chart>
    <view class="title">
      <i class="icon el-icon-s-data"></i>
      <text style="flex: 1">商品浏览量排行</text>
      <!-- <text style="font-size: 13px">排序类型：</text> -->
      <!-- <el-select
        v-model="value"
        placeholder="请选择"
        size="small"
        @change="change"
      >
        <el-option label="浏览次数" value="view_count"></el-option>
        <el-option label="下单次数" value="create_count"></el-option>
        <el-option label="支付次数" value="pay_count"></el-option>
        <el-option label="完成次数" value="sell_count"></el-option>
        <el-option label="支付金额" value="sell_money"></el-option>
      </el-select> -->
    </view>
    <detail-good-rank
      ref="detailGoodRank"
      @comp="hidden"
      @previewGoods="previewGoods"
    ></detail-good-rank>
    <previewGoods v-model="formDatas.previewGoods"></previewGoods>
  </view>
</template>

<script>
import detailGoodView from "./components/good-view";
import detailGoodChart from "./components/good-chart";
import detailGoodRank from "./components/good-rank";
import previewGoods from "../goods/form/previewGoods.vue";

export default {
  components: { detailGoodView, detailGoodChart, detailGoodRank, previewGoods },
  data() {
    return {
      mode: "日",
      value: "view_count",
      num: 0,
      time: [],
      formDatas: {},
      pickerOptions: {
        shortcuts: [
           //今天
           {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          //昨天
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          //本月
          {
            text: "本月",
            onClick(picker) {
              let { monthStart, monthEnd,todayEnd } = vk.pubfn.getCommonTime(new Date());
              picker.$emit("pick", [monthStart, todayEnd]);
            },
          },
          //本年
          {
            text: "本年",
            onClick(picker) {
              let { yearStart, monthEnd,todayEnd } = vk.pubfn.getCommonTime(new Date());
              picker.$emit("pick", [yearStart, todayEnd]);
            },
          },
          
        ],
      },
    };
  },
  mounted() {
    //默认time为最近一个月
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.time = [start.getTime(), end.getTime()];
    this.num = 0;
    this.init();
  },
  methods: {
    init() {
      this.num = 1;
      vk.showLoading("加载中...");
      console.log(this.time);
      let end = this.time[1];
      let endTime = vk.pubfn.getCommonTime(new Date(end));
      let start = this.time[0];
      let startTime = vk.pubfn.getCommonTime(new Date(start));
      this.$refs.detailGoodView.init([startTime.todayStart, endTime.todayEnd]);
      this.$refs.detailGoodChart.init([startTime.todayStart, endTime.todayEnd]);
      this.$refs.detailGoodRank.init();
    },
    change(e) {
      this.$refs.detailGoodRank.init(e);
    },
    hidden() {
      this.num++;
      vk.hideLoading();
    },
    //预览商品
    previewGoods(item) {
      let h5Config = vk.getVuex("$user.mchInfo.h5") || {};
      let { domain, path } = h5Config;
      if (!domain) {
        this.$confirm("请先前往平台管理-h5，设置服务域名", "提示", {
          confirmButtonText: "立即前往",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            vk.navigateTo("/pages/app-platform/h5");
          })
          .catch(() => {});
        return;
      }
      let rootPath;
      if (path) {
        rootPath = `${domain}/${path}`;
      } else {
        rootPath = domain;
      }
      let pagePath = `/pages/goods/goods-detail?_id=${item._id}`;
      let url = rootPath + pagePath;
      vk.pubfn.openForm("previewGoods", {
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #f5f5f5;
}

.title {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  .icon {
    border-radius: 50%;
    border: 5px solid rgb(230, 247, 255);
    background-color: rgb(230, 247, 255);
    color: rgb(24, 144, 255);
    margin-right: 6px;
  }
}
</style>
